import { Component, OnInit, EventEmitter, ViewChild, ElementRef } from '@angular/core';
import { FormControl, FormGroup, Validators } from "@angular/forms";
import { ChartClickParams, LineArg } from "kchart";
import { ChartTypes } from "./..";
import { getId } from "utils";

interface SettingParams {
  innerHTML: string;
  hasColor: boolean;
  labels: string[]
}

const INTRO_SET = {
  "MA": {
    innerHTML: `<p>移动平均线 (MA) 是以道·琼斯的"平均成本概念"为理论基础，将一段时期内的股票价格平均值连成曲线，用来显示股价的历史波动情况，进而反映股价指数未来发展趋势的技术分析方法。<br>1. 股价下方的均线可以作为<span style="color:#D62728">支撑线</span>。股价上方的均线可以作为<span style="color:#2CA02C">阻力线</span>。<br>2. 当短周期均线向上穿过长周期均线时，构成<span style="color:#D62728">黄金交叉点</span> (<span style="color:#D62728">买入点</span>)。当短周期均线向下穿过长周期均线时，构成<span style="color:#2CA02C">死亡交叉点</span> (<span style="color:#2CA02C">卖出点</span>)。<b>这种判断方法适用于大牛市和大熊市，不适用于震荡市</b>。</p>`,
    hasColor: true,
    labels: [
      "日移动平均线",
    ]
  },
  "VOL": {
    innerHTML: `<p>量移动平均线 (VMA) 将一段时期内的成交量平均值连成曲线，用来显示成交量的历史波动情况，进而反映成交量未来发展趋势的技术分析方法。</p>`
    ,
    hasColor: true,
    labels: [
      "日移动平均线",
    ]
  },
  "KDJ": {
    innerHTML: `<p>随机指标 (KDJ) 是一种反映超买超卖强弱的指标，也能够反映出市场在一定时期内的景气程度。K，D，J都在0-100之间变动，通常80甚至90时被认为市场已到达<b>超买状态</b>，至此市场价格自然会回落调整。当价格低跌至30以下即被认为是<b>超卖状态</b>，市价将出现反弹回升。在反应股市价格变化时，J最快，K指标其次，D指标最慢。K指标反应敏捷，但容易出错；D指标反映稍慢，但稳重可靠。<b>这种判断方法通常适用于震荡市，不适用于大牛市和大熊市</b>。</p>`
    ,
    hasColor: false,
    labels: [
      "天",
      "天"
    ]
  },
  "MACD": {
    innerHTML: `<p>指数平滑移动平均线 (MACD) 是由快的指数移动平均线 (图中<span style="color:#D62728">红线</span>) 减去慢的指数移动平均线 (图中<span style="color:blue">蓝线</span>)。当MACD (图中竖柱) 从负数转向正数，是<span style="color:#D62728">买入信号</span>。当MACD从正数转向负数，是<span style="color:#2CA02C">卖出信号</span>。<b>此分析方法通常适用于大牛市和大熊市，不适用于震荡市</b>。</p>`
    ,
    hasColor: false,
    labels: [
      "日快线移动平均",
      "日慢线移动平均",
      "日移动平均"
    ]
  },
  "RSI": {
    innerHTML: `<p>相对强弱指数 (RSI) 是一种反映超买超卖强弱的指标，也能够反映出市场在一定时期内的景气程度。数字在0-100之间变动，通常80甚至90时被认为市场已到达<b>超买状态</b>，至此市场价格自然会回落调整。当价格低跌至30以下即被认为是<b>超卖状态</b>，市价将出现反弹回升。<b>这种判断方法通常适用于震荡市，不适用于大牛市和大熊市</b>。</p>`
    ,
    hasColor: false,
    labels: [
      "日RSI",
      "日RSI",
      "日RSI"
    ]
  },
  "BOLL": {
    innerHTML: `<p>布林通道 (BOLL) 是根据统计学中的标准差原理设计出来的一种非常实用的技术指标。它由三条轨道线组成，其中上下两条线分别可以看成是价格的<span style="color:#2CA02C">压力线</span>和<span style="color:#D62728">支撑线</span>，在两条线之间是一条价格平均线，一般情况价格线在由上下轨道组成的带状区间游走，而且随价格的变化而自动调整轨道的位置。</p>`
    ,
    hasColor: false,
    labels: [
      "日布林线"
    ]
  },
  "WR": {
    innerHTML: `<p>威廉指标 (WR) 是一种兼具超买超卖和强弱分界的指标，当WR高于80，即处于<b>超卖状态</b>，行情即将见底，应当考虑买进。当WR低于20，即处于<b>超买状态</b>，行情即将见顶，应当考虑卖出。</p>`
    ,
    hasColor: true,
    labels: [
      "日威廉指标",
      "日威廉指标",
      "日威廉指标"
    ]
  },
  "VMACD": {
    innerHTML: `<p>指数平滑移动平均线 (MACD) 是由快的指数移动平均线 (图中<span style="color:#D62728">红线</span>) 减去慢的指数移动平均线 (图中<span style="color:blue">蓝线</span>)。当MACD (图中竖柱) 从负数转向正数，是<span style="color:#D62728">买入信号</span>。当MACD从正数转向负数，是<span style="color:#2CA02C">卖出信号</span>。<b>此分析方法通常适用于大牛市和大熊市，不适用于震荡市</b>。</p>`,
    hasColor: false,
    labels: [
      "日快线移动平均",
      "日慢线移动平均",
      "日移动平均"
    ]
  }
};

@Component({
  // moduleId: module.id,
  selector: "kchart-setting",
  templateUrl: "kchart-setting.component.html",
  inputs: [
    "params",
  ],
  outputs: [
    "confirmClick",
    "closeClick"
  ],
  styleUrls: [
    "kchart-setting.component.less"
  ]
})
export class KchartSettingComponent implements OnInit {
  params: ChartClickParams;
  confirmClick = new EventEmitter();
  closeClick = new EventEmitter();
  intro_set;
  formGroup;
  @ViewChild("article", { read: ElementRef })
  article: ElementRef;
  @ViewChild("closeToggle", { read: ElementRef })
  closeToggle: ElementRef;
  constructor() { }

  ngOnInit() {
    if (this.params.args) {
      this.intro_set = INTRO_SET[this.params.data];
      this.params.args = this.params.args
        .map(line =>
          Object.assign({}, line, { key: "chart-" + getId() }));
      console.debug("Chart Args: ", this.params);
      this.formGroup =
        new FormGroup(
          this.params.args.reduce((formGroup, line) =>
            Object.assign({}, formGroup, { [line["key"]]: new FormControl(line.value, Validators.required) }),
            {})
        );
    }

    console.debug("FROM GROUP: ", this.formGroup);
  }

  ngAfterViewInit() {
    let innerHTML = INTRO_SET[this.params.data]["innerHTML"];
    this.article.nativeElement.innerHTML = innerHTML;
  }

  close(e: MouseEvent) {

    console.debug("Close Setting: ", e);
    // this.closeClick.emit();
    // if (e.srcElement === this.closeToggle.nativeElement) {
    // }
    this.closeClick.emit();
    e.preventDefault();
    return false;
  }

  onSubmit(e: Event) {

    console.debug("Setting Confirm: ", this.formGroup.value);
    this.confirmClick.next(
      Object.assign({}, this.params, {
        // args: this.params.args.map(line => +this.formGroup.value[line.key])
        args: this.params.args.map(line => this.formGroup.value[line.key] >= 1 ? +this.formGroup.value[line.key] : 1)
      })
    );

    e.preventDefault();
    return false;
  }

}